<template lang="html">
  <div class="global">
    <div class="mask"></div>
    <ZanTab v-bind="tab1" :componentId="'tab1'" :handleZanTabChange="handleZanTabChange"/>
    <!-- 全部 -->
    <div class="g-all" v-show="showTab=='all'">
      <div class="content" @click="toContractDetail(item)" v-for="item in contractList" :key="index">
        <div class="top">
          <span class="left">合同编号：{{item.contract_no}}</span>
          <span class="right staying" v-if="item.contract_state == '2'">待入住</span>
          <span class="right renting" v-if="item.contract_state == '1'">进行中</span>
          <span class="right finish" v-if="item.contract_state == '3'">已结束</span>
        </div>
        <div class="middle">
          <image v-if="item.room_images.length != 0" :src="item.room_images[0]"></image>
          <image v-else src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180721/2018072106411915336.jpg"></image>
          <div class="text">
            <span class="top">{{item.district_name}}{{item.building}}{{item.room_name}}</span>
            <span class="mid">{{item.fee_rent}}元/月</span>
            <span class="bottom">租期：{{item.start_date}}至{{item.end_date}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 待入住 -->
    <div class="g-staying" v-show="showTab == 'staying'">
      <div class="content" @click="toContractDetail(item)" v-for="item in contractList" :key="index">
        <div class="top">
          <span class="left">合同编号：{{item.contract_no}}</span>
          <span class="right staying">待入住</span>
        </div>
        <div class="middle">
          <image v-if="item.room_images.length != 0" :src="item.room_images[0]"></image>
          <image v-else src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180721/2018072106411915336.jpg"></image>
          <div class="text">
            <span class="top">{{item.district_name}}{{item.building}}{{item.room_name}}</span>
            <span class="mid">{{item.fee_rent}}元/月</span>
            <span class="bottom">租期：{{item.start_date}}至{{item.end_date}}</span>
          </div>
        </div>
        <!-- <div class="bottom">已开启自动扣费</div> -->
      </div>
    </div>
    <!-- 进行中 -->
    <div class="g-renting" v-show="showTab == 'renting'">
      <div class="content" @click="toContractDetail(item)" v-for="item in contractList" :key="index">
        <div class="top">
          <span class="left">合同编号：{{item.contract_no}}</span>
          <span class="right renting">进行中</span>
        </div>
        <div class="middle">
          <image v-if="item.room_images.length != 0" :src="item.room_images[0]"></image>
          <image v-else src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180721/2018072106411915336.jpg"></image>
          <div class="text">
            <span class="top">{{item.district_name}}{{item.building}}{{item.room_name}}</span>
            <span class="mid">{{item.fee_rent}}元/月</span>
            <span class="bottom">租期：{{item.start_date}}至{{item.end_date}}</span>
          </div>
        </div>
        <!-- <div class="bottom">已开启自动扣费</div> -->
      </div>
    </div>
    <!-- 已结束 -->
    <div class="g-finish" v-show="showTab == 'finish'">
      <div class="content" @click="toContractDetail(item)" v-for="item in contractList" :key="index">
        <div class="top">
          <span class="left">合同编号：{{item.contract_no}}</span>
          <span class="right finish">已结束</span>
        </div>
        <div class="middle">
          <image v-if="item.room_images.length != 0" :src="item.room_images[0]"></image>
          <image v-else src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180721/2018072106411915336.jpg"></image>
          <div class="text">
            <span class="top">{{item.district_name}}{{item.building}}{{item.room_name}}</span>
            <span class="mid">{{item.fee_rent}}元/月</span>
            <span class="bottom">租期：{{item.start_date}}至{{item.end_date}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import ZanTab from 'mpvue-zanui/src/components/zan/tab'
export default {
  components: {
    ZanTab
  },
  data () {
    return {
      showTab: 'all',
      contractList: [],
      tab1: {
        list: [
          { id: 0, title: '全部' },
          { id: 1, title: '待入住' },
          { id: 2, title: '进行中' },
          { id: 3, title: '已结束' }
        ],
        scroll: false,
        selectedId: 0
      }
    }
  },
  onShow () {
    this.opcontractlist(0)
  },
  methods: {
    ...ZanTab.methods,
    handleZanTabChange (e) {
      const {componentId, selectedId} = e
      this[componentId].selectedId = selectedId
      switch (selectedId) {
        case 0:
          this.showTab = 'all'
          this.opcontractlist(0)
          break
        case 1:
          this.showTab = 'staying'
          this.opcontractlist(2)
          break
        case 2:
          this.showTab = 'renting'
          this.opcontractlist(1)
          break
        case 3:
          this.showTab = 'finish'
          this.opcontractlist(3)
          break
        default:
      }
    },
    toContractDetail (item) {
      this.$router.push({ path: '/pages/contract/contract_detail/main', query: { contract_id: item.contract_id } })
    },
    opcontractlist (contractStatus) {
      var param = {}
      param['contract_status'] = contractStatus
      const opcontractlist = api.opcontractlist(param)
      opcontractlist.then(d => {
        if (d.code === 200) {
          this.contractList = []
          for (var index in d.data.list) {
            this.contractList.push(d.data.list[index])
          }
        }
      })
      .catch((e) => {
        console.log(e)
      })
    }
  }
}
</script>

<style lang="css">
  @import "./contract_overview.css";
</style>
